<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你一定也遇到这样的问题...</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="assets/css/index.css">
    <style>
        #before-load {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: #fff;
            z-index: 10000;
        }

        #before-load .loading-bread {
            position: absolute;
            top: 30%;
            left: 46%;
            width: 8%;
            -webkit-animation: loading-bread 0.5s linear infinite alternate;
            -o-animation: loading-bread 0.5s linear infinite alternate;
            animation: loading-bread 0.5s linear infinite alternate;
        }

        @keyframes loading-bread {
            to {
                -webkit-transform: scale(0);
                -moz-transform: scale(0);
                -ms-transform: scale(0);
                -o-transform: scale(0);
                transform: scale(0);
            }
        }

        #before-load .loading-love {
            position: absolute;
            top: 30%;
            left: 46%;
            width: 8%;
            -webkit-animation: loading-love 0.5s linear infinite alternate;
            -o-animation: loading-love 0.5s linear infinite alternate;
            animation: loading-love 0.5s linear infinite alternate;
        }

        @keyframes loading-love {
            from {
                -webkit-transform: scale(0);
                -moz-transform: scale(0);
                -ms-transform: scale(0);
                -o-transform: scale(0);
                transform: scale(0);
            }
            to {
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
            }
        }
        #before-load .loading-ren {
            position: absolute;
            top: 10%;
            left: 30%;
            height:30%;
        }

        #before-load .loading-text {
            position: absolute;
            top: 40%;
            left: 30%;
            width: 40%;
        }

        #before-load .loading-title {
            position: absolute;
            top: 50%;
            left: 30%;
            width: 40%;
            overflow: hidden;
            -webkit-animation: loading-title 3s linear infinite;
            -o-animation: loading-title 3s linear infinite;
            animation: loading-title 3s linear infinite;
        }

        @keyframes loading-title {
            from {
                width: 0;
            }
            to {
                width: 40%;
            }
        }
    </style>
    <style>
        .page {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .loading {
            display: block;
            width: 40vw;
            border-radius: 40vw;
        }
    </style>
    <style>
        #page-1-bg {
            position: relative;
            top: 0;
            transition: 1s;
        }

        .bg {
            width: 100%;
            min-height: 1200px;
            position: relative;
        }

        .bg-img {
            width: 100%;
            display: block;
            z-index: 0;
        }

        .message1, .message2, .message3, .message4, .message5, .message6, .message7, .message8, .message9 {
            position: absolute;
            padding: 5px 10px;
            border: 2px solid #333;
            border-radius: 10px;
            color: #333;
            background-color: white;
            font-size: 14px;
            opacity: 0;
            z-index: 100;
            /*transition-property: width;*/
        }

        .message1 {
            top: 1%;
            left: 10px;
            width: 70%;
            transition: 1s;
        }

        .message7 {
            position: fixed;
            bottom: 10%;
            left: 10%;
            width: 70%;
            transition: 1s 1s;
        }

        .message2 {
            top: 33.77%;
            left: 10px;
            width: 80%;
            transition: 1s 0.8s;
        }

        .message3 {
            top: 41.5%;
            left: 18%;
            width: 30%;
            font-size: 12px;
            transition: 1s 1.6s;
        }

        .message4 {
            top: 43%;
            left: 60%;
            width: 30%;
            font-size: 10px;
            transition: 1s 2.2s;
        }

        .message5 {
            top: 77.09%;
            left: 9%;
            width: 30%;
            transition: 1s 1.2s;
        }

        .message6 {
            top: 75%;
            left: 55%;
            width: 30%;
            transition: 1s 0.8s;
        }

        .message8 {
            top: 95%;
            left: 25%;
            transition: 1s 1.6s;
        }

        .message10.animate {
            -webkit-animation: message8 1s forwards;
            -o-animation: message8 1s forwards;
            animation: message8 1s forwards;
        }

        @keyframes message8 {
            to {
                bottom: 255px;
            }
        }

        .subject1, .subject2, .subject3, .subject4 {
            position: absolute;
            display: block;
            z-index: 200;
        }

        .subject1 {
            top: 10.83%;
            left: 12.34%;
            width: 52.5%;
        }

        .subject1.animation {
            -webkit-animation: 5s subject1 infinite alternate;
            -o-animation: 5s subject1 infinite alternate;
            animation: 5s subject1 infinite alternate;
        }

        @keyframes subject1 {
            to {
                -webkit-transform: translateX(10%);
                -moz-transform: translateX(10%);
                -ms-transform: translateX(10%);
                -o-transform: translateX(10%);
                transform: translateX(10%);
            }
        }

        .subject2 {
            top: 44.81%;
            left: 41%;
            width: 14%;
        }

        .subject2.animation {
            -webkit-animation: 0.5s subject2 infinite alternate;
            -o-animation: 0.5s subject2 infinite alternate;
            animation: 0.5s subject2 infinite alternate;
        }

        @keyframes subject2 {
            to {
                -webkit-transform: scaleY(0.95);
                -moz-transform: scaleY(0.95);
                -ms-transform: scaleY(0.95);
                -o-transform: scaleY(0.95);
                transform: scaleY(0.95);
            }
        }

        .subject3 {
            top: 80.6%;
            left: 28.9%;
            width: 10.16%;
        }

        .subject3.animation {
            -webkit-animation: 0.5s subject2 infinite alternate;
            -o-animation: 0.5s subject2 infinite alternate;
            animation: 0.5s subject2 infinite alternate;
        }

        .subject4 {
            top: 79.94%;
            left: 73%;
            width: 9.5%;
        }

        .yang-tai, .deng, .yezi-1, .yezi-2, .yezi-3, .yezi-4, .yezi-5, .yezi-6 {
            position: absolute;
            z-index: 300;
        }

        .yang-tai {
            top: 46.27%;
            left: 23.12%;
            width: 54.38%;
        }

        .yezi-1 {
            top: 43%;
            left: 0;
            width: 5%;
        }

        .yezi-1.animation {
            -webkit-animation: yezi-1 8s infinite;
            -o-animation: yezi-1 8s infinite;
            animation: yezi-1 8s infinite;
        }

        @keyframes yezi-1 {
            to {
                opacity: 0.9;
                -webkit-transform: translate(2000%, 800%) rotate(-90deg);
                -moz-transform: translate(2000%, 800%) rotate(-90deg);
                -ms-transform: translate(2000%, 800%) rotate(-90deg);
                -o-transform: translate(2000%, 800%) rotate(-90deg);
                transform: translate(2000%, 800%) rotate(-90deg);
            }
        }

        .yezi-2 {
            top: 47%;
            left: 0;
            width: 5%;
        }

        .yezi-2.animation {
            -webkit-animation: yezi-1 6s infinite 1s;
            -o-animation: yezi-1 6s infinite 1s;
            animation: yezi-1 6s infinite 1s;
        }

        .yezi-3 {
            top: 47%;
            left: 0;
            width: 5%;
        }

        .yezi-3.animation {
            -webkit-animation: yezi-1 8s infinite 2s;
            -o-animation: yezi-1 8s infinite 2s;
            animation: yezi-1 8s infinite 2s;
        }

        .yezi-4 {
            top: 80%;
            left: 0;
            width: 5%;
        }

        .yezi-4.animation {
            -webkit-animation: yezi-1 8s infinite;
            -o-animation: yezi-1 8s infinite;
            animation: yezi-1 8s infinite;
        }

        .yezi-5 {
            top: 82%;
            left: 0;
            width: 5%;
        }

        .yezi-5.animation {
            -webkit-animation: yezi-1 6s infinite 1s;
            -o-animation: yezi-1 6s infinite 1s;
            animation: yezi-1 6s infinite 1s;
        }

        .yezi-6 {
            top: 83%;
            left: 0;
            width: 5%;
        }

        .yezi-6.animation {
            -webkit-animation: yezi-1 8s infinite 2s;
            -o-animation: yezi-1 8s infinite 2s;
            animation: yezi-1 8s infinite 2s;
        }

        .deng {
            top: 0;
            left: 78.5%;
            width: 15%;
            opacity: 0.2;
        }

        .deng.animation {
            -webkit-animation: deng-flash 1s linear infinite alternate;
            -o-animation: deng-flash 1s linear infinite alternate;
            animation: deng-flash 1s linear infinite alternate;
        }

        @keyframes deng-flash {
            to {
                opacity: 1;
            }
        }

        .controller .hand-tip, .controller .music-controller {
            position: fixed;
            z-index: 400;
        }

        .controller .hand-tip {
            bottom: 0;
            left: 50%;
            width: 8%;
            opacity: 0.7;
        }

        .controller .hand-tip.animation {
            -webkit-animation: hand-tip 2s infinite;
            -o-animation: hand-tip 2s infinite;
            animation: hand-tip 2s infinite;
        }

        @keyframes hand-tip {
            to {
                opacity: 0.3;
                bottom: 10%;
                -webkit-transform: translateY(-100%);
                -moz-transform: translateY(-100%);
                -ms-transform: translateY(-100%);
                -o-transform: translateY(-100%);
                transform: translateY(-100%);
            }
        }

        @-webkit-keyframes hand-tip {
            to {
                opacity: 0.5;
                bottom: 10%;
                -webkit-transform: translateY(-100%);
                -moz-transform: translateY(-100%);
                -ms-transform: translateY(-100%);
                -o-transform: translateY(-100%);
                transform: translateY(-100%);
            }
        }

        .controller .music-controller {
            width: 7%;
            right: 5%;
            top: 5%;
            z-index: 4000;
        }

        .controller .music-controller.animation {
            -webkit-animation: music-controller 4s linear infinite;
            -o-animation: music-controller 4s linear infinite;
            animation: music-controller 4s linear infinite;
        }

        @keyframes music-controller {
            to {
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .selection {
            position: relative;
            padding: 32px 16px 8px;
            height: 255px;
            /*width: 100vw;*/
            background-color: white;
            border: 1px solid #333;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            z-index: 999;
            font-size: 14px;
            line-break: normal;
            /*box-sizing: border-box;*/
            /*transition: 1s;*/
            -webkit-transform: translateY(-50px);
            -moz-transform: translateY(-50px);
            -ms-transform: translateY(-50px);
            -o-transform: translateY(-50px);
            transform: translateY(-50px);
        }

        .selection .title {
            font-weight: bold;
            text-align: center;
            line-height: 1.75em;
            letter-spacing: 2px;
        }

        .selection .buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .selection .button {
            top: 10%;
            margin: 15px 3% 0;
            padding: 10px 5%;
            width: 30%;
            height: 20px;
            border: 1px gray solid;
            box-shadow: 0 3px 5px rgba(128, 128, 128, 0.55);
            border-radius: 5px;
            background: url("assets/img/button-bg.png");
            text-align: center;
            letter-spacing: 1px;
        }
        .selection .buy-button {
            position: absolute;
            bottom: 20px;
            right: 10px;
            height: 40px;
            line-height: 40px;
            font-size:10px;
        }



    </style>
    <style>
        .sign-page {
            position: relative;
            padding: 10vh 0 0;
            width: 100vw;
            height: 90vh;
            color: #fff6f6;
            background: url("assets/img/bg.png");
            background-size: cover;
        }

        .user {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .avatar {
            width: 30vmin;
            height: 30vmin;
            display: block;
            border: white 3px solid;
            border-radius: 30vmin;
        }

        .nickname {
            margin-top: 10px;
        }

        .tip {
            margin-top: 20px;
            padding: 4%;
            width: 60vw;
            height: 20vh;
            color: #333;
            background-color: rgb(250, 250, 250);
            border: 1px white solid;
            border-radius: 5px;
        }

        .tip .back {
            position: absolute;
            top: 10%;
            left: 30%;
            height: 80%;
            opacity: 0.5;
        }

        .tip .title {
            height: 20%;
            font-size: 0.9em;
        }

        .tip .signature {
            position: relative;
            margin-top: 3%;
            padding: 10px;
            display: block;
            height: 60%;
            border: 2px solid indianred;
        }

        .tip .signature.love {
            border: 2px solid indianred;
        }

        .tip .signature.bread {
            border: 2px solid green;
        }

        .tip .signature.both {
            border: 2px solid gray;
        }

        .signature:focus {
            border: 2px solid indianred;
        }

        .signature .input {
            position: absolute;
            top: 0;
            left: 0;
            padding: 2%;
            width: 100%;
            height: 100%;
            overflow: auto;
            text-align: left;
            box-sizing: border-box;
        }

        .signature .input:focus {
            border: none;
            box-shadow: none;
        }

        .enter-map {
            margin: 20px auto 0;
            padding: 10px 5%;
            width: 50%;
            height: 5%;
            border: 1px gray solid;
            box-shadow: 0 3px 5px rgba(128, 128, 128, 0.55);
            border-radius: 5px;
            color: #333;
            background: url("assets/img/button-bg.png");
            background-size: cover;
            text-align: center;
            letter-spacing: 1px;
        }
        .reselect {
            height:30px;
        }
    </style>
    <style>
        .map-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #map-div {
            width: 100%;
            height: 100%;
        }

        .position {
            position: relative;
        }

        .my.position {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 4px solid;
            overflow: hidden;
            z-index: 100;
        }

        .position .ava {
            width: 100%;
            height: 100%;
        }

        .other.position {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid;
            overflow: hidden;
        }

        .position.love {
            border-color: indianred;
        }

        .position.bread {
            border-color: green;
        }

        .position.both {
            border-color: gray;
        }

        #dan-mu {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 30vh;
            font-size: 0.9em;
            z-index: 1000;
            overflow: hidden;
            pointer-events: none;
        }

        #dan-mu .float {
            position: absolute;
            right: 0;
            padding: 3px;
            opacity: 0;

        }

        #dan-mu .float.break {
            color: green;
        }

        #dan-mu .float.love {
            color: red;
        }

        #dan-mu .float.side {
            color: black;
        }

        #dan-mu .float.animate {
            -webkit-animation: float-move 8s linear;
            -o-animation: float-move 8s linear;
            animation: float-move 8s linear;
        }

        @keyframes float-move {
            from {
                opacity: 1;
                /*right: 0;*/
                -webkit-transform: translateX(100%);
                -moz-transform: translateX(100%);
                -ms-transform: translateX(100%);
                -o-transform: translateX(100%);
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                /*right: 200vw;*/
                -webkit-transform: translateX(-300%);
                -moz-transform: translateX(-300%);
                -ms-transform: translateX(-300%);
                -o-transform: translateX(-300%);
                transform: translateX(-300%);
            }
        }

        .other-detail {
            position: fixed;
            top: 0;
            left: 0;
            margin: 10vh 10vw;
            padding: 5vh 0;
            width: 80vw;
            height: 70vh;
            background: white;
            border: 2px solid gray;
            border-radius: 5px;
            z-index: 999;
        }

        .share-button {
            position: absolute;
            right: 5%;
            bottom: 8%;
            height: 5%;
        }

        .share-button > img {
            height: 100%;
        }

        .share-model {
            position: fixed;
            top: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.8);
            z-index: 9999;
        }

        .share-tip {
            position: absolute;
            top: 10%;
            right: 10%;
            color: white;
        }

        .share-point {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 10%;
        }
        .share-word {
            position: absolute;
            top:12%;
            right:15%;
            width:30%;
        }

        .buy {
            position: absolute;
            bottom: 1%;
            right: 5%;
            height:5%;
        }
        .buy >img{
            height:100%;
        }

    </style>
</head>
<body>
<audio id="music" autoplay="autoplay" loop="loop">
    <source src="assets/img/song.mp3" type="audio/mpeg">
</audio>
<div id="before-load">
    <!--<img class="loading-bread" src="assets/img/LOADING_01.png">-->
    <!--<img class="loading-love" src="assets/img/LOADING_03.png">-->
    <img class="loading-ren" src="assets/img/ren3.png">
    <div class="loading-text">爱情和面包如何抉择</div>
    <div class="loading-title">Loading......</div>
</div>
<div class="controller">
    <img class="hand-tip animation" src="assets/img/finger.png">
    <img class="music-controller animation" src="assets/img/yinyue.png">
</div>
<div class="page" id="page-1">
    <div id="page-1-bg">
        <div id="page-1-img" class="bg">
            <div class="message1">在生活中，每个人都为自己追求的忙碌着，或为事业，或为爱情。</div>
            <div class="message2">但是在生活中，爱情和事业两难的选择经常让你陷入困境。</div>
            <div class="message3">亲爱的，我也是为你好！！！</div>
            <div class="message4">我不要，我只要你能陪着我做我们喜欢的事情！！！</div>
            <div class="message5">我想要爱情！还想要面包！</div>
            <div class="message6">面对选择，到底我该如何是好？</div>
            <div class="message7">爱情面包饮水饱，如果重来一次。会是怎样？</div>
            <div class="message8">十字路口我该如何抉择呢？</div>
            <div class="message9">十字路口我该如何抉择呢？</div>
            <img class="subject1 animation" src="assets/img/ren3.png"/>
            <img class="subject2 animation" src="assets/img/ren4.png"/>
            <img class="subject3 animation" src="assets/img/ren2.png"/>
            <img class="subject4" src="assets/img/ren1.png"/>
            <img class="yang-tai" src="assets/img/yt.png"/>
            <img class="deng animation" src="assets/img/guang.png"/>
            <img class="yezi-1 animation" src="assets/img/yezi1.png">
            <img class="yezi-2 animation" src="assets/img/yezi2.png">
            <img class="yezi-3 animation" src="assets/img/yezi3.png">
            <img class="yezi-4 animation" src="assets/img/yezi1.png">
            <img class="yezi-5 animation" src="assets/img/yezi2.png">
            <img class="yezi-6 animation" src="assets/img/yezi3.png">
            <img class="bg-img" src="assets/img/bg.png"/>
        </div>
        <div id="page-1-selection" class="selection">
            <div class="title">
                无惧爱情，无惧梦想！<br>
                你愿意走进“爱乐之城”<br>
                和我们一起带着梦想去追逐爱情么？
            </div>
            <div class="buttons">
                <div class="button love" id="love">
                    选择爱情
                </div>
                <div class="button bread" id="bread">
                    选择面包
                </div>
                <div class="button both" id="both">
                    左右为难
                </div>
            </div>
            <div class="buy-button">
                我很幸福，快来加入爱乐之城 &nbsp;&gt;
            </div>
        </div>
    </div>


</div>
<div class="page" id="page-2">
    <div class="sign-page">
        <div class="user">
            <img class="avatar" src="assets/img/avatar.jpg"/>
            <div class="nickname">
                昵称
            </div>
            <div class="tip">
                <div class="title"></div>
                <div class="signature">
                    <img class="back" src="assets/img/ren3.png">
                    <div class="input" contenteditable="true"></div>
                </div>
            </div>
        </div>
        <div class="enter-map">
            进入阵营地图
        </div>
        <img src="assets/img/reselect.png" class="reselect">
    </div>
</div>
<div class="page" id="page-3">
    <div class="map-container">
        <div id="dan-mu">

        </div>
        <div id="map-div"></div>
        <div class="share-button"><img src="assets/img/share-bt.png"></div>
        <div class="buy"><img src="assets/img/goupiao-1.png"></div>

    </div>
    <div class="other-detail">
        <div class="user">
            <img class="avatar" src="assets/img/avatar.jpg"/>
            <div class="nickname">
                昵称
            </div>
            <div class="tip">
                <div class="title">他的宣言</div>
                <div class="signature">
                    <div class="input"></div>
                </div>
            </div>
        </div>
        <div class="enter-map back-to-map">
            回到地图
        </div>
    </div>
    <div class="share-model">
        <img class="share-point" src="assets/img/share-point.png">
        <img class="share-word" src="assets/img/share-word.png">
    </div>
</div>
<div class="modal">
    <img class="loading" src="assets/img/loading.gif">
</div>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?6b2377ddccd847e0847d3d30c1c24115";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();

function is_weixin() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            return true;
        } else {
            return false;
        }
    }

    if (!is_weixin()) {
        alert('请示用微信打开网页');
    } else {
        //监听加载状态改变
//    document.onreadystatechange = completeLoading;
        var beforeLoadingCount = 0;
        var beforeLoadingDom = document.getElementsByClassName('loading-title')[0];
        var beforeLoadingInterval = setInterval(function () {
            if (beforeLoadingCount < 80) {
                beforeLoadingCount += 20;
            } else if (beforeLoadingCount < 96) {
                beforeLoadingCount += 1;
            }
            beforeLoadingDom.innerHTML = 'Loading...' + beforeLoadingCount + '%...';
            var imgs = document.getElementsByTagName('img');
            console.log(imgs);
            var leftCount = 0;
            for (var i = 0; i < imgs.length; i++) {

                if (!imgs[i].complete) {
                    leftCount++;
                }
            }
            if (leftCount === 0 && beforeLoadingCount > 40) {
                var loadingMask = document.getElementById('before-load');
                loadingMask.parentNode.removeChild(loadingMask);
                window.scrollTo(0, 0);
                clearInterval(beforeLoadingInterval);
                setPage1();
            }
        }, 1000);
    }


    //加载状态为complete时移除loading效果
    //    function completeLoading() {
    //        if (document.readyState == "loading") {
    //            beforeLoadingCount = 30;
    //        }
    //        if (document.readyState == "interactive") {
    //            if (beforeLoadingCount < 80) {
    //                beforeLoadingCount = 80;
    //            }
    //        }
    //        if (document.readyState == "complete") {
    //            var loadingMask = document.getElementById('before-load');
    //            loadingMask.parentNode.removeChild(loadingMask);
    //            window.scrollTo(0, 0);
    //            clearInterval(beforeLoadingInterval);
    //        }
    //    }

</script>
<!--<script src="assets/js/jquery.js"></script>-->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=573ed72630874e4b330036d7e6efea92"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    function getCookie(objname) {//获取指定名称的cookie的值
        var arrstr = document.cookie.split("; ");
        for (var i = 0; i < arrstr.length; i++) {
            var temp = arrstr[i].split("=");
            if (temp[0] == objname)
                return decodeURI(temp[1]);
        }
    }

    //    api
    var addUserUrl = 'http://jtest.i-h5.cn/LaLaLand/userinfo/addUserinfo.do';
    var updateUserInfo = 'http://jtest.i-h5.cn/LaLaLand/userinfo/updateUserinfo.do';
    var getPositionByRange = 'http://jtest.i-h5.cn/LaLaLand/userinfo/getPositionByRange.do';
    //?minlongitude=1&maxlongitude=2&minlatitude=1&maxlatitude=2
    var typeMap = {
        bread: {code: -1, text: '面包派'},
        love: {code: -1, text: '爱情派'},
        both: {code: -1, text: '左右为难派'}
    };
    var wordMap = {
        bread: {title: '请输入您的面包派宣言', word: ''},
        love: {title: '请输入您的爱情派宣言', word: ''},
        both: {title: '请输入您的左右为难派宣言', word: ''}
    };
    var page1 = $('#page-1');
    var page2 = $('#page-2');
    var page3 = $('#page-3');
    var loading = $('.modal');
    var otherDetail = $('.other-detail');
    page2.hide();
    page3.hide();
    loading.hide();
    otherDetail.hide();
    var info = {
        old: false,
        locationFail: false,
        locationSuccess: false,
        others: [],
        openid: getCookie('openid'),
        nickname: getCookie('nickname'),
        imgUrl: getCookie('headimgurl'),
        sex: getCookie('sex'),
        word: getCookie('word')
    };
    if (info.openid) {
        //nickname 左右两边各去除一个双引号
        info.imgUrl = info.imgUrl.substring(1, info.imgUrl.length - 1);
        info.old = getCookie('ifnew') === 'old';
    }
    //测试模拟地址 [116.40, 39.91
    info.lat = 39.91;
    info.lng = 116.40;
    var currentMarkers = [];
</script>
<script>
    var wxconfig = {};
    wxconfig.appId = "";
    wxconfig.timestamp = "";
    wxconfig.nonceStr = "";
    wxconfig.signature = "";

    //游戏链接地址目录
    var gameUrl = window.location.href;

    $.ajax({
        url: "http://jtest.i-h5.cn/LaLaLand/Share.do",
        data: {
            homeurl: gameUrl
        },
        dataType: "json",
        type: "get",
        success: function (data) {
            console.log(data.appid);
            wxconfig.appId = data.appid;
            wxconfig.timestamp = data.timestamp;
            wxconfig.nonceStr = data.noncestr;
            wxconfig.signature = data.signature;
            wx.config({
                debug: false,
                appId: wxconfig.appId,
                timestamp: wxconfig.timestamp,
                nonceStr: wxconfig.nonceStr,
                signature: wxconfig.signature,
                jsApiList: ['checkJsApi', 'onMenuShareTimeline',
                    'onMenuShareAppMessage', 'onMenuShareQQ',
                    'onMenuShareWeibo', 'onMenuShareQZone',
                    'hideMenuItems', 'showMenuItems',
                    'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem',
                    'translateVoice', 'startRecord', 'stopRecord',
                    'onVoiceRecordEnd', 'playVoice', 'onVoicePlayEnd',
                    'pauseVoice', 'stopVoice', 'uploadVoice',
                    'downloadVoice', 'chooseImage', 'previewImage',
                    'uploadImage', 'downloadImage', 'getNetworkType',
                    'openLocation', 'getLocation', 'hideOptionMenu',
                    'showOptionMenu', 'closeWindow', 'scanQRCode',
                    'chooseWXPay', 'openProductSpecificView', 'addCard',
                    'chooseCard', 'openCard']
            });
        }
    });


    //分享到朋友数据
    var sharedata = {
        title: '你一定也遇到这样的问题...',
        desc: '掩饰生活，还是掩饰自己。你愿意走进爱乐之城和我们一起追逐爱情吗？',
        link: 'http://jtest.i-h5.cn/LaLaLand/weixin.do',
        imgUrl: 'http://jtest.i-h5.cn/LaLaLand/assets/img/ren3.png',
        success: function () {
            alert('分享成功');
        },
        cancel: function () {
            alert('分享失败');
        }
    };
    console.log(sharedata);
    //分享到朋友圈数据 默认和分享朋友一样
    var timelinedata = {
        title: sharedata.title,
        link: sharedata.link,
        desc: sharedata.desc,
        imgUrl: sharedata.imgUrl
    };


    sharedata.trigger = function (res) {
    };
    sharedata.cancel = function (res) {
    };
    sharedata.fail = function (res) {
    };
    sharedata.success = function (res) {
    };

    timelinedata.trigger = function (res) {
    };
    timelinedata.cancel = function (res) {
    };
    timelinedata.fail = function (res) {
    };
    timelinedata.success = function (res) {
    };

    wx.ready(function () {
        //type: 'link',//分享类型，music、video、link，默认是link
        //dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        wx.onMenuShareAppMessage(sharedata);

        // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareTimeline(sharedata);

        console.log("初始化wx分享成功！");
        wx.getLocation({
            success: function (res) {
                console.log(res);
                info.lat = res.latitude;
                info.lng = res.longitude;
                info.locationSuccess = true;
            },
            cancel: function (res) {
                info.locationFail = false;
                alert('用户拒绝授权获取地理位置');
            }
        });
    });

</script>

<script>
    var mapObj = new AMap.Map('map-div', {
        mapStyle: 'amap://styles/2e33408ab6de52e59a97e430bb97221f',//样式URL
        resizeEnable: true,
        zoom: 15,
        zooms:[12,18]
    });


    //hhttp://127.0.0.1:8080/LaLaLand/userinfo/getPositionByRange.do.do?minlongitude=1&maxlongitude=2&minlatitude=1&maxlatitude=2
    AMap.event.addListener(mapObj,'moveend',function(){
       mapMoved();
    });
    function mapMoved(){
        if(mapObj.getZoom()<12){
            mapObj.setZoom(12);
        }
        var center = mapObj.getCenter();
        // 确定显示范围
        var bound = mapObj.getBounds();
        $.ajax(getPositionByRange, {
            data: {
                minlongitude: bound.getSouthWest( ).getLng(),
                maxlongitude: bound.getNorthEast().getLng(),
                minlatitude: bound.getSouthWest().getLat(),
                maxlatitude: bound.getNorthEast().getLat()
            },
            success: function (data) {
                info.others = data.list;
                console.log(data.list);
                updateMap();
            }
        })
    }
</script>
<script>


    function audioAutoPlay(id) {
        var audio = document.getElementById(id);
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
        document.addEventListener('YixinJSBridgeReady', function () {
            audio.play();
        }, false);
    }

    audioAutoPlay('music');
    //停止播放音乐按钮
    $('.music-controller').click(function () {
        var controller = $(this);
        var audio = document.getElementById('music');
        if (controller.hasClass('animation')) {
            audio.pause();
            controller.removeClass('animation');
        } else {
            audio.play();
            controller.addClass('animation');
        }

    });

    function setPage1() {
        var startY,//触摸时的坐标
            y, //滑动的距离
            aboveY = 0; //设一个全局变量记录上一次内部块滑动的位置

        var page1selection = $('#page-1-selection');
        var inner = document.getElementById("page-1-bg");
        var imgHeight = document.getElementById('page-1-img').clientHeight;
        var selectionHeight = page1selection.outerHeight();
        var actionTops = [0, -imgHeight / 3, -imgHeight * 2 / 3, -imgHeight * 2 / 3 - selectionHeight];
        var actionIndex = 0;
        var message7 = $('.message7');
        var message8 = $('.message8');
        var message9 = $('.message9');


        setAction();

        function touchStart(e) {//触摸
//            e.preventDefault();
            var touch = e.touches[0];
            startY = touch.pageY;   //刚触摸时的坐标
        }

        function touchMove(e) {//滑动
            e.preventDefault();
            var touch = e.touches[0];
            y = touch.pageY - startY;//滑动的距离

        }

        function touchEnd(e) {//手指离开屏幕
            if (y < -10) {
                actionIndex++;
                //向下翻页，每次一屏
            }
            if (y > 10) {
                //向上翻页
                actionIndex--;
            }
            setAction();
            inner.style.top = actionTops[actionIndex] + 'px'; //这一句中的aboveY是inner上次滑动后的位置
            e.preventDefault();
        }//
        document.getElementById('page-1-bg').addEventListener('touchstart', touchStart, false);
        document.getElementById("page-1-bg").addEventListener('touchmove', touchMove, false);
        document.getElementById("page-1-bg").addEventListener('touchend', touchEnd, false);


        function setAction() {
            if (actionIndex === 0) {
                $('.message1').css('opacity', 1);
                message7.show();
                message7.css('opacity', 1);
                message8.hide();
                message8.css('opacity', 0);
                message9.hide();
//                page1selection.hide();
//                page1selection.height(0);
            }
            if (actionIndex === 1) {
                $('.message2').css('opacity', 1);
                $('.message3').css('opacity', 1);
                $('.message4').css('opacity', 1);
                message7.hide();
                message7.css('opacity', 0);
                message8.hide();
                message8.css('opacity', 0);
                message9.hide();
//                page1selection.hide();
//                page1selection.height(0);
            }
            if (actionIndex === 2) {
                $('.message5').css('opacity', 1);
                $('.message6').css('opacity', 1);
                message8.show();
                message8.css('opacity', 1);
//                message8.removeClass('animate');
//                message8.css('bottom', '10%');
                message7.hide();
                message7.css('opacity', 0);
//                page1selection.hide();
//                page1selection.height(0);
            }
            if (actionIndex === 3) {
                $('.controller .hand-tip').hide();
                message7.hide();
                message8.show();
//                message8.css('opacity', 0);
//                message8.addClass('animate');
//                page1selection.show();
//                page1selection.height(225);
            }
        }

        document.getElementById('page-1-bg').addEventListener('touchstart', touchStart, false);
        document.getElementById("page-1-bg").addEventListener('touchmove', touchMove, false);
        document.getElementById("page-1-bg").addEventListener('touchend', touchEnd, false);
        $('.buy-button').on('touchend',function(e){
            window.location.href = 'http://m.228.cn/s/LALALAND';
        });
        $('.button').on('touchend', function (e) {
            info.type = $(this).attr('id');
            page1.hide();
            page2.show();
            setPage2();
            e.preventDefault();
        });
//        $('.button').click(function () {
//            info.type = $(this).attr('id');
//            page1.hide();
//            page2.show();
//            setPage2();
//        });
    }


</script>
<script>
    function setPage2() {
        var type = info.type;
        $('.sign-page .avatar').attr('src', info.imgUrl);
        $('.sign-page .nickname').text(info.nickname);
        $('.sign-page .tip .title').text(wordMap[type].title);
        $('.sign-page .signature').addClass(type);
        $('.sign-page .signature .input').text(wordMap[type].word);

        $('.reselect').click(function(){
            page1.show();
            page2.hide();
        });
        //分享文案修改
//        if (type == 'bread') {
//            sharedata.desc = '爱与情与面包，我选择面包，来爱乐之城做出你的抉择！';
//        } else if (type == 'love') {
//            sharedata.desc = '爱与情与面包，我选择爱情，来爱乐之城做出你的抉择！';
//        } else {
//            sharedata.desc = '爱与情与面包，我不知道，来爱乐之城做出你的抉择！';
//        }

    }

    function successFuc(data) {
        console.log(data);
        info.others = data.list;
        var lockerCounter = 0;
        var locker = setInterval(function () {
            if (info.locationSuccess === true) {
                window.clearInterval(locker);
                page2.hide();
                page3.show();
                loading.hide();
                setPage3();
            }
            lockerCounter++;
            if (lockerCounter > 10) {
                window.clearInterval(locker);
                page2.hide();
                page3.show();
                loading.hide();
                setPage3();
            }
        }, 1000);

    };

    function errorFuc() {

    };
    $('.sign-page .enter-map').click(function () {
        info.word = $('.sign-page .signature .input').text();
        loading.show();
//        setTimeout(successFuc, 1000);
//        if (info.old) {
//            $.ajax({
//                url: updateUserInfo,
//                data: {
//                    openid: info.openid,
//                    longitude: info.lng,
//                    latitude: info.lat
//                },
//                success: successFuc,
//                error: errorFuc
//            })
//        } else {
        $.ajax({
            url: addUserUrl,
            data: {
                openid: info.openid,
                nickname: info.nickname,
                headimgurl: info.imgUrl,
                choice: info.type,
                word: info.word,
                longitude: info.lng,
                latitude: info.lat
            },
            success: successFuc,
            error: errorFuc
        });
//        }
    });
</script>
<script>
    var logoMap = {
        bread: '<img class="p-logo" src="assets/img/bread.png"/>',
        love: '<img class="p-logo" src="assets/img/love.png"/>',
        both: '<img class="p-logo" src="assets/img/both.png"/>'
    };

    function setPage3() {
        //设置图标样式
        $('.my.position').addClass(info.type);
        //地图重定位
        // 设置缩放级别和中心点
        mapObj.setZoomAndCenter(13, [info.lng, info.lat]);
        //标记自己
        var content = '<div id="' + info.openid + '" class="my position ' + info.type + '">' + '<img class="ava" src="' + info.imgUrl + '"/>' + logoMap[info.type] +
            '</div>';
        var marker = new AMap.Marker({
            content: content,
            offset: new AMap.Pixel(-26, -26),
            map: mapObj,
            position: [info.lng, info.lat],
            zIndex: 200
        });
        marker.setMap(mapObj);
        marker.on('click', function () {
            $('.other-detail .avatar').attr('src', info.imgUrl);
            $('.other-detail .nickname').text(info.nickname);
//            $('.other-detail .title').text(wordMap[info.type].title);
            $('.other-detail .signature .input').text(info.word);
            otherDetail.show();
        });
        mapMoved();
        updateMap();
        setTimeout(function () {
            startDaMu();
        }, 1000);
        var shareModel = $('.share-model');
        shareModel.hide();
        //分享按钮
        $('.share-button').click(function () {
            shareModel.show();
        });
        shareModel.click(function () {
            shareModel.hide();
        })
        //购票按钮
        $('.buy').click(function () {
            window.location.href = 'http://m.228.cn/s/LALALAND';
        });
    }

    function createMarker(other) {
        var position=[other.longitude, other.latitude],
            imgUrl=other.headimgurl,
            type=other.choice, id=other.openid;
        var content = '<div id="' + id + '" class="other position ' + type + '">' +
            '<img class="ava" src="' + imgUrl + '"/>' + logoMap[info.type] +
            '</div>';
        var marker = new AMap.Marker({
            content: content,
            offset: new AMap.Pixel(-26, -26),
            map: mapObj,
            position: position,
            extData:id
        });
        marker.on('click', function () {
            showDetail(id);

        });
        return marker;
    }
    function updateMap() {
        if (info.others && info.others.length > 0) {
            //判断是否有新的数据，添加新数据,不删除视野内的重复数据
            var removeMarker = [];
            var bounds = mapObj.getBounds();
            for(var i=0;i<info.others.length;i++){
                var other = info.others[i];
                if(other.openid===info.openid){
                    continue;
                }
                var marker = currentMarkers.filter(function(marker){
                    return marker.extData == other.openid;
                });
                if(marker&&marker.length>0){
                    currentMarkers.push(marker[0]);
                }else{
                    //新建marker
                    currentMarkers.push(createMarker(other));
                }
            }
            for(var i=0;i<currentMarkers.length;i++){
                var marker = currentMarkers[i];
                //判断是否在界内
                if(bounds.contains(marker.getPosition())){
                    currentMarkers[i].setMap(mapObj);
                }else{
                    mapObj.remove(currentMarkers);
                }

            }

        }
    }


    //其他人的点
    function addOther(position, imgUrl, type, id) {
        var content = '<div id="' + id + '" class="other position ' + type + '">' +
            '<img class="ava" src="' + imgUrl + '"/>' + logoMap[info.type] +
            '</div>';
        var marker = new AMap.Marker({
            content: content,
            offset: new AMap.Pixel(-26, -26),
            map: mapObj,
            position: position
        });
        marker.setMap(mapObj);
        currentMarkers.push(marker);
        marker.on('click', function () {
            showDetail(id);

        });
    }

    $('.enter-map.back-to-map').click(function () {
        otherDetail.hide();
    });

    function showDetail(id) {
        var detail = info.others.find(function (item) {
            return item.openid == id;
        });
        if (detail) {
            $('.other-detail .avatar').attr('src', detail.headimgurl);
            $('.other-detail .nickname').text(detail.nickname);
//            $('.other-detail .title').text(wordMap[detail.choice].title);
            $('.other-detail .signature .input').text(detail.word);
            otherDetail.show();
        }
    }

    function startDaMu() {
        //    弹幕
        var breaks = '连爱都没有，谈何生活&人要无爱和猪有什么区别&爱是上天赐予我们最好的礼物&爱情是我对这个现实的社会最后一点希望&面包和爱情，没爱情，我还吃面包干吗&宁可饿死，不能无爱&爱是什么？爱是一切啊！&我不吃饭，有爱就饱了&爱情才是一份终身的事业&人生在世，孰能无爱'.split('&');
        var loves = '没事业我拿什么养活爱情&赚钱优先，才是对另一半最好的负责&先有面包，后有爱情&只有解决温饱，才能谈及爱情&如果连生存都解决不了，有什么资本恋爱&没有面包的爱情是寒酸的，先赚面包吧&爱情的前提是你有资本养活你的对象&任何没有面包的爱情都是刷流氓&当你拥有事业，何惧没有爱情&我宁愿暂时孤苦，也不愿她现在陪我吃苦'.split('&');
        var sides = '爱情还是面包，这是个问题&爱情事业双丰收，怎么就那么难呢&我希望有个爱我的人陪我奋斗事业&我害怕爱情耽误了事业，也怕事业耽误了爱情&无爱的面包，无面包的爱，都不是好结果&爱情和事业的双叉路，我该怎么办&若要有爱情，又怎能没有面包&我希望同时拥有面包和爱情&爱情面包的选择题总让人为难&我渴望事业，但也期待爱情'.split('&');
        var list = [];
        breaks.forEach(function (item) {
            list.push({type: 'break', text: item})
        });
        loves.forEach(function (item) {
            list.push({type: 'love', text: item})
        });
        sides.forEach(function (item) {
            list.push({type: 'side', text: item})
        });
        //加入自己的弹幕
        list.push({type: info.type, text: info.word});
        //打乱
        list = list.sort(function (a, b) {
            return Math.random() > .5 ? -1 : 1;
            //用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
        });

        var index = 0;
        var danMu = document.getElementById('dan-mu');
        var floats = [];
        var daMuInterval = setInterval(function () {
            var float = document.createElement('span');
            float.className = 'float animate';
            var item = list[index];
            float.className += ' ' + item.type;
            float.innerHTML = list[index].text;
            var top = 1 + Math.random() * 20;
            float.style.top = top + 'vh';
            danMu.appendChild(float);
            index++;
            if (index >= list.length) {
                clearInterval(daMuInterval);
            }
            floats.push(float);
            if (floats.length > 20) {
                var remove = floats.splice(0, 1)[0];
                danMu.removeChild(remove);
            }
        }, 1500);
    }


</script>
</body>
</html>